<template>
	<view class="content">
         <!-- 图像和信息 -->
		<view class="user_info">
			<view class="user_img">
                <image mode="widthFix" :src="imgData.user.avatar"></image>
            </view>
            <view class="user_txt">
                <view class="txt_name">
                    {{imgData.user.name}}
                </view>
                <view class="txt_time">
                    {{imgData.cnTime}}
                </view>
            </view>
		</view>
         <!-- 大图 -->
         <view class="user_img">
           <image :src="imgData.newImg"></image>
         </view>
         <!-- 点赞收藏 -->
         <view class="user_rank">
            <view class="rank">
               <text class="iconfont iconzan"><text class="text1">{{imgData.rank}}</text></text>
            </view>
            <view class="user_collect">
            <text class="iconfont iconshoucang"> <text class="text1">收藏</text></text>
            </view>
         </view>
	</view>
</template>

<script>
 import moment from 'moment'
 //设置中文
 moment.locale("zh-cn");
	export default {
		data() {
			return {
                /**图文数据 */
				imgData:{}
			}
		},
		onLoad() {
            const {list,i} = getApp().globalData
            this.imgData = list[i]
            console.log(this.imgData)
            //图片
            this.imgData.newImg = list[i].thumb+list[i].rule.replace('$<Height>',360)
            // xxx年前的数据
            this.imgData.cnTime = moment(this.imgData.atime*1000).fromNow();
            this.getimgDetal()
		},
		methods: {
          getimgDetal(){
              this.request({
                  url:`/api/v2/wallpaper/wallpaper/${this.imgData.id}/comment`,
                  method:"get"
              }).then((res)=>{
                  this.album = res.data.res.album
                  this.comment = res.data.res.comment
                  this.hot = res.data.res.hot
                  console.log(res)
              })
          }
		}
	}
</script>

<style lang='less' scoped>
   .user_info{
       padding: 40rpx;
       display: flex;
      .user_img{
          width: 88rpx;
          image{
              border-radius: 50%;
          }
      } 
      .user_txt{
          margin-left: 30rpx;
        .txt_name{
            font-size: 24rpx;
            font-weight: bold;
        }
        .txt_time{}
      }
   }
   .user_rank{
       display: flex;
       justify-content: space-around;
       align-items: center;
       height: 80rpx;
       border-bottom: 3rpx solid #eee;
       .text1{
           margin-left: 10rpx;
       }
      .rank{
        
      }
      .user_collect{} 
   }
</style>
